<template>
  <div>
    <el-form ref="form" :model="user" :rules="rules" label-width="80px">
      <el-form-item label="序号">
        <el-input v-model="user.u_id" readonly="readonly"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="u_name">
        <el-input v-model="user.u_name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="u_age">
        <el-input v-model="user.u_age"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="u_sex">
        <el-input v-model="user.u_sex"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="u_phone">
        <el-input v-model="user.u_phone"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="u_address">
        <el-input v-model="user.u_address"></el-input>
      </el-form-item>
      <el-form-item label="照片">
        <img :src="user.u_photopath" width="50px">
        <el-upload ref="upload" name="photo" action="" :auto-upload="false"
                   accept=".png,.jpg,.gif" :on-change="handleChange"
                   :file-list="fileList" :http-request="httpRequest"
        >
          <el-button type="primary" size="small">点击上传</el-button>
          <span slot="tip">.png,.jpg,.gif</span>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: "UserUpdate",
    data(){
      return{
        user:{},
        fileList:[],
        file:[],
        rules:{

        },
      }
    },
    methods:{
      onSubmit(){
        this.$refs.form.validate(valid=>{
          if (valid){
            var formData = new FormData();
            this.$refs.upload.submit();
            this.file.forEach(function(file){
              console.log(file);
              formData.append('photo',file,file.name);
            });
            Object.keys(this.user).forEach(key=>{
              formData.append(key,this.user[key])
            });
            this.$axios.post('UserServlet/userUpdate',formData)
              .then(resp=>{
                this.$router.push('/user/list')
              })
          }
        })
      },
      handleChange(file){
        this.fileList.splice(0,this.fileList.length)
        this.user.u_photopath=URL.createObjectURL(file.raw)
        this.fileList[0]=file;
      },
      httpRequest(param){
        this.file.push(param.file)
      },
    },
    created() {
      this.$axios.get('UserServlet/findById?u_id=' + this.$route.params.id)
        .then(resp=>{
          this.user = resp.data;

        })
    }
  }
</script>

<style scoped>

</style>
